import React from 'react';
import { Link } from 'react-router-dom';

import Pagination from 'util/pagination/index.jsx';
import TableList from 'util/table-list/index.jsx';
import ListSearch from './index-list-search.jsx';
import PageTitle from 'component/page-title/index.jsx';

import Product from 'service/product-service.jsx';
import MUtil from 'util/mm.jsx';
import './index.scss';


const _product = new Product();
const _mm = new MUtil();


class ProductList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            pageNum: 1,
            listType: 'list',
            searchType: '',
            searchKeyWord: ''

        }
    }
    componentDidMount() {
        this.loadProductList();
    }
    loadProductList() {
        let listParam = {
            listType: this.state.listType,
            pageNum: this.state.pageNum
        };
        //如果是搜索的话，需要传入搜索类型和搜索关键字
        if (this.state.listType === 'search') {
            listParam.searchType = this.state.searchType;
            listParam.keyword = this.state.searchKeyWord;
        }
        //请求接口


        _product.getProductList(listParam).then(res => {
            this.setState(res)
        }, errMsg => {
            //请求接口出错时，先清空list
            this.setState({
                list: []
            });
            _mm.errorTips(errMsg);
        });
    }
    onSearch(searchType, searchKeyWord) {
        let listType = searchKeyWord === '' ? 'list' : 'search';
        this.setState({
            listType: listType,
            pageNum: 1,
            searchKeyWord: searchKeyWord,
            searchType: searchType
        }, () => {
            this.loadProductList();
        })
    }
    //当页数发生变化的时候
    onPageNumChange(pageNum) {
        this.setState({
            pageNum: pageNum
        }, () => {
            this.loadProductList();
        })
    }
    //改变商品状态
    onSetProductStatus(e, productId, currentStatus) {
        let newStatus = currentStatus == 1 ? 2 : 1,
            confirmTips = currentStatus == 1 ? '确定要下架该商品' : '确定要上架该商品';
        if (window.confirm(confirmTips)) {
            _product.setProductStatus({
                productId: productId,
                status: newStatus
            }).then(res => {
                _mm.successTips(res);
                this.loadProductList();
            }, err => {
                _mm.errorTips(res);
            })
        }
    }
    render() {
        let tableHeads = [
            { name: '商品ID', width: '10%' },
            { name: '商品信息', width: '50%' },
            { name: '价格', width: '10%' },
            { name: '状态', width: '15%' },
            { name: '操作', width: '15%' }
        ]
        return (
            <div id="page-wrapper">
                <PageTitle title='商品列表'>
                    <div className="page-header-right">
                        <Link to='/product/save' className='btn btn-primary'>
                            <i className='fa fa-plus'></i>
                            <span style={{letterSpacing: '2px'}}> 添加商品</span>
                        </Link>
                    </div>
                </PageTitle>
                <ListSearch onSearch={(searchType, searchKeyWord) => { this.onSearch(searchType, searchKeyWord); }} />
                <TableList tableHeads={tableHeads}>
                    {
                        this.state.list.map((product, index) => {
                            return (
                                <tr key={index}>
                                    {/* key值是react在渲染数据时，要求必须加的属性 */}
                                    <td>{product.id}
                                    </td>
                                    <td>{product.name}
                                        <p>{product.subtitle}</p>
                                    </td>
                                    <td>￥{product.price}
                                    </td>
                                    <td>{product.status == 1 ? '在售' : '已下架'}  <div style={{ width: "10px", height: "8px" }}></div>
                                        <button
                                            className={product.status == 1 ? 'btn btn-xs btn-warning' : 'btn btn-xs btn-info'}
                                            id='salesStatus' onClick={e => this.onSetProductStatus(e, product.id, product.status)}>{product.status == 1 ? '下架' : '上架'}
                                        </button>
                                    </td>
                                    <td>
                                        <Link to={`/product/detail/${product.id}`}>查看</Link><div style={{ width: "10px", height: "8px" }}></div>
                                        <Link to={`/product/save/${product.id}`}>编辑</Link>
                                    </td>
                                </tr>
                            )
                        })
                    }
                </TableList>
                <Pagination current={this.state.pageNum}
                    total={this.state.total}
                    onChange={pageNum => this.onPageNumChange(pageNum)}>
                </Pagination>
            </div>
        )
    }

}

export default ProductList